<template>
  <div class="openlayers-map">
    <div class="map-header">
      <h3>二维态势图</h3>
      <div class="map-controls">
        <el-select v-model="selectedLayer" placeholder="选择图层" size="small">
          <el-option label="地形图" value="terrain" />
          <el-option label="卫星图" value="satellite" />
          <el-option label="海图" value="nautical" />
        </el-select>
        <el-button type="primary" size="small" @click="resetView">重置视图</el-button>
        <el-button type="success" size="small" @click="toggleHeatmap">
          {{ showHeatmap ? '隐藏热力图' : '显示热力图' }}
        </el-button>
      </div>
    </div>

    <div class="map-content">
      <!-- OpenLayers地图容器 -->
      <div ref="mapContainer" class="map-container">
        <!-- 模拟的2D地图，实际项目中这里会初始化OpenLayers -->
        <div class="map-simulation">
          <!-- 地图背景 -->
          <div class="map-background" :class="selectedLayer"></div>
          
          <!-- 网格 -->
          <div class="coordinate-grid">
            <div class="grid-line vertical" v-for="i in 10" :key="'v' + i" 
                 :style="{ left: (i * 10) + '%' }"></div>
            <div class="grid-line horizontal" v-for="i in 8" :key="'h' + i" 
                 :style="{ top: (i * 12.5) + '%' }"></div>
          </div>

          <!-- 热力图层 -->
          <div class="heatmap-layer" v-if="showHeatmap">
            <div class="heat-point point-1"></div>
            <div class="heat-point point-2"></div>
            <div class="heat-point point-3"></div>
            <div class="heat-point point-4"></div>
            <div class="heat-point point-5"></div>
          </div>

          <!-- 电磁设备标记 -->
          <div class="equipment-markers">
            <div class="marker radar-marker" style="top: 35%; left: 25%;" 
                 @click="selectMarker('radar-1')" :class="{ active: selectedMarker === 'radar-1' }">
              <div class="marker-icon">R1</div>
              <div class="marker-coverage radar-coverage"></div>
            </div>
            <div class="marker comm-marker" style="top: 60%; left: 70%;" 
                 @click="selectMarker('comm-1')" :class="{ active: selectedMarker === 'comm-1' }">
              <div class="marker-icon">C1</div>
              <div class="marker-coverage comm-coverage"></div>
            </div>
            <div class="marker jammer-marker" style="top: 20%; left: 80%;" 
                 @click="selectMarker('jammer-1')" :class="{ active: selectedMarker === 'jammer-1' }">
              <div class="marker-icon">J1</div>
              <div class="marker-coverage jammer-coverage"></div>
            </div>
            <div class="marker sensor-marker" style="top: 70%; left: 30%;" 
                 @click="selectMarker('sensor-1')" :class="{ active: selectedMarker === 'sensor-1' }">
              <div class="marker-icon">S1</div>
              <div class="marker-coverage sensor-coverage"></div>
            </div>
          </div>

          <!-- 数据流连接线 -->
          <div class="data-connections" v-if="showConnections">
            <svg class="connection-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
              <path d="M25,35 Q50,20 70,60" stroke="#00f5ff" stroke-width="0.2" 
                    fill="none" opacity="0.6" class="connection-line">
                <animate attributeName="stroke-dashoffset" values="0;-10" dur="2s" repeatCount="indefinite" />
              </path>
              <path d="M80,20 Q60,40 30,70" stroke="#ffaa00" stroke-width="0.2" 
                    fill="none" opacity="0.6" class="connection-line">
                <animate attributeName="stroke-dashoffset" values="0;-10" dur="1.5s" repeatCount="indefinite" />
              </path>
            </svg>
          </div>

          <!-- 比例尺 -->
          <div class="map-scale">
            <div class="scale-bar">
              <div class="scale-segment"></div>
              <div class="scale-segment"></div>
              <div class="scale-segment"></div>
            </div>
            <div class="scale-text">0 &nbsp;&nbsp;&nbsp; 50km &nbsp;&nbsp;&nbsp; 100km</div>
          </div>

          <!-- 坐标显示 -->
          <div class="coordinate-display" v-if="mouseCoordinates">
            {{ mouseCoordinates }}
          </div>
        </div>
      </div>

      <!-- 设备信息面板 -->
      <div class="equipment-panel">
        <div class="panel-header">
          <div class="panel-title">设备信息</div>
          <div class="panel-actions">
            <el-button type="text" size="small" @click="toggleConnections">
              {{ showConnections ? '隐藏连接' : '显示连接' }}
            </el-button>
          </div>
        </div>

        <!-- 设备详情 -->
        <div class="equipment-details" v-if="selectedEquipment">
          <div class="detail-section">
            <div class="detail-title">{{ selectedEquipment.name }}</div>
            <div class="detail-items">
              <div class="detail-item">
                <span class="detail-label">类型:</span>
                <span class="detail-value">{{ selectedEquipment.type }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">频率:</span>
                <span class="detail-value">{{ selectedEquipment.frequency }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">功率:</span>
                <span class="detail-value">{{ selectedEquipment.power }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">状态:</span>
                <span class="detail-value" :class="selectedEquipment.status">
                  {{ getStatusText(selectedEquipment.status) }}
                </span>
              </div>
            </div>
          </div>

          <!-- 实时参数 -->
          <div class="parameter-section">
            <div class="param-title">实时参数</div>
            <div class="param-chart" ref="paramChart"></div>
          </div>
        </div>

        <!-- 设备列表 -->
        <div class="equipment-list" v-else>
          <div class="list-header">设备列表 ({{ equipmentData.length }})</div>
          <div class="list-items">
            <div class="list-item" v-for="equipment in equipmentData" :key="equipment.id"
                 @click="selectEquipment(equipment)" :class="{ active: selectedMarker === equipment.id }">
              <div class="item-icon" :class="equipment.type"></div>
              <div class="item-info">
                <div class="item-name">{{ equipment.name }}</div>
                <div class="item-status" :class="equipment.status">
                  {{ getStatusText(equipment.status) }}
                </div>
              </div>
              <div class="item-signal">
                <div class="signal-indicator" :class="getSignalLevel(equipment.signal)"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 图层控制 -->
        <div class="layer-controls">
          <div class="control-title">图层控制</div>
          <div class="control-items">
            <div class="control-item">
              <el-checkbox v-model="showHeatmap">热力图</el-checkbox>
            </div>
            <div class="control-item">
              <el-checkbox v-model="showConnections">连接线</el-checkbox>
            </div>
            <div class="control-item">
              <el-checkbox v-model="showCoverage">覆盖范围</el-checkbox>
            </div>
            <div class="control-item">
              <el-checkbox v-model="showTrajectories">运动轨迹</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 响应式数据
const selectedLayer = ref('terrain')
const showHeatmap = ref(true)
const showConnections = ref(true)
const showCoverage = ref(true)
const showTrajectories = ref(false)
const selectedMarker = ref('')
const selectedEquipment = ref(null)
const mouseCoordinates = ref('')

// 设备数据
const equipmentData = ref([
  {
    id: 'radar-1',
    name: '雷达站-东北',
    type: 'radar',
    frequency: '2.4-2.5 GHz',
    power: '1000W',
    status: 'active',
    signal: 85
  },
  {
    id: 'comm-1',
    name: '通信基站-中心',
    type: 'communication',
    frequency: '1.8-1.9 GHz',
    power: '500W',
    status: 'active',
    signal: 92
  },
  {
    id: 'jammer-1',
    name: '干扰设备-北',
    type: 'jammer',
    frequency: '2.0-3.0 GHz',
    power: '2000W',
    status: 'warning',
    signal: 67
  },
  {
    id: 'sensor-1',
    name: '传感器-南',
    type: 'sensor',
    frequency: '5.8 GHz',
    power: '100W',
    status: 'active',
    signal: 78
  }
])

// 图表引用
const mapContainer = ref(null)
const paramChart = ref(null)

// 图表实例
let paramChartInstance = null

// 选择标记
const selectMarker = (markerId) => {
  selectedMarker.value = markerId
  const equipment = equipmentData.value.find(eq => eq.id === markerId)
  selectedEquipment.value = equipment
  
  // 初始化参数图表
  nextTick(() => {
    initParamChart()
  })
}

// 选择设备
const selectEquipment = (equipment) => {
  selectedMarker.value = equipment.id
  selectedEquipment.value = equipment
  
  nextTick(() => {
    initParamChart()
  })
}

// 重置视图
const resetView = () => {
  selectedMarker.value = ''
  selectedEquipment.value = null
  mouseCoordinates.value = ''
}

// 切换热力图
const toggleHeatmap = () => {
  showHeatmap.value = !showHeatmap.value
}

// 切换连接线
const toggleConnections = () => {
  showConnections.value = !showConnections.value
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    active: '正常',
    warning: '告警',
    error: '故障',
    offline: '离线'
  }
  return statusMap[status] || '未知'
}

// 获取信号等级
const getSignalLevel = (signal) => {
  if (signal >= 80) return 'strong'
  if (signal >= 60) return 'medium'
  return 'weak'
}

// 初始化参数图表
const initParamChart = () => {
  if (!paramChart.value) return
  
  if (paramChartInstance) {
    paramChartInstance.dispose()
  }
  
  paramChartInstance = echarts.init(paramChart.value)
  
  const timeData = Array.from({length: 20}, (_, i) => `${i * 5}s`)
  const signalData = Array.from({length: 20}, () => 
    Math.round((Math.random() * 30 + 70) * 10) / 10
  )
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00f5ff',
      textStyle: { color: '#ffffff' }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '20%',
      top: '15%'
    },
    xAxis: {
      type: 'category',
      data: timeData,
      axisLabel: { color: '#ffffff', fontSize: '0.7vw' },
      axisLine: { lineStyle: { color: '#00f5ff' } }
    },
    yAxis: {
      type: 'value',
      name: '信号强度',
      nameTextStyle: { color: '#ffffff', fontSize: '0.8vw' },
      axisLabel: { color: '#ffffff', fontSize: '0.7vw' },
      axisLine: { lineStyle: { color: '#00f5ff' } },
      splitLine: { lineStyle: { color: 'rgba(0, 245, 255, 0.3)' } }
    },
    series: [{
      type: 'line',
      data: signalData,
      smooth: true,
      lineStyle: { color: '#00ff00', width: 2 },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 255, 0, 0.3)' },
          { offset: 1, color: 'rgba(0, 255, 0, 0.1)' }
        ])
      },
      symbol: 'circle',
      symbolSize: 3
    }]
  }
  
  paramChartInstance.setOption(option)
}

// 模拟鼠标坐标
const handleMouseMove = (event) => {
  if (!mapContainer.value) return
  
  const rect = mapContainer.value.getBoundingClientRect()
  const x = ((event.clientX - rect.left) / rect.width * 360 - 180).toFixed(3)
  const y = (90 - (event.clientY - rect.top) / rect.height * 180).toFixed(3)
  mouseCoordinates.value = `${x}°E, ${y}°N`
}

onMounted(() => {
  // 添加鼠标移动事件监听
  if (mapContainer.value) {
    mapContainer.value.addEventListener('mousemove', handleMouseMove)
  }
  
  // 在实际项目中，这里会初始化OpenLayers
  // initOpenLayersMap()
})

onUnmounted(() => {
  if (paramChartInstance) {
    paramChartInstance.dispose()
  }
  
  if (mapContainer.value) {
    mapContainer.value.removeEventListener('mousemove', handleMouseMove)
  }
  
  // 在实际项目中，这里会销毁OpenLayers实例
  // destroyOpenLayersMap()
})
</script>

<style scoped>
.openlayers-map {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1vh;
  padding: 1.5vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(0, 245, 255, 0.3);
}

.map-header h3 {
  color: #00f5ff;
  font-size: 1.4vw;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.map-controls {
  display: flex;
  gap: 1vw;
  align-items: center;
}

.map-content {
  flex: 1;
  display: flex;
  gap: 1vw;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.map-container {
  width: 70%;
  height: 100%;
  position: relative;
  background: #001122;
  border-radius: 0.5vh;
  border: 1px solid rgba(0, 245, 255, 0.3);
  overflow: hidden;
  cursor: crosshair;
}

.map-simulation {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease;
}

.map-background.terrain {
  background: 
    radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.3), transparent),
    radial-gradient(circle at 80% 30%, rgba(34, 139, 34, 0.2), transparent),
    radial-gradient(circle at 60% 80%, rgba(30, 144, 255, 0.2), transparent),
    linear-gradient(45deg, #2c3e50, #34495e);
}

.map-background.satellite {
  background: 
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(circle at 70% 60%, rgba(200, 200, 200, 0.05), transparent),
    linear-gradient(135deg, #1a1a1a, #2d2d2d);
}

.map-background.nautical {
  background: 
    radial-gradient(circle at 40% 30%, rgba(0, 100, 200, 0.3), transparent),
    radial-gradient(circle at 60% 70%, rgba(0, 150, 255, 0.2), transparent),
    linear-gradient(180deg, #001122, #003366);
}

.coordinate-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
}

.grid-line {
  position: absolute;
  background: rgba(0, 245, 255, 0.3);
}

.grid-line.vertical {
  width: 1px;
  height: 100%;
}

.grid-line.horizontal {
  height: 1px;
  width: 100%;
}

.heatmap-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.heat-point {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.6), transparent);
  animation: heat-pulse 3s ease-in-out infinite;
}

.point-1 {
  top: 25%;
  left: 30%;
  width: 8vh;
  height: 8vh;
}

.point-2 {
  top: 60%;
  left: 65%;
  width: 6vh;
  height: 6vh;
  animation-delay: -1s;
}

.point-3 {
  top: 15%;
  left: 75%;
  width: 5vh;
  height: 5vh;
  animation-delay: -2s;
}

.point-4 {
  top: 75%;
  left: 25%;
  width: 7vh;
  height: 7vh;
  animation-delay: -0.5s;
}

.point-5 {
  top: 45%;
  left: 50%;
  width: 4vh;
  height: 4vh;
  animation-delay: -1.5s;
}

.equipment-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.marker {
  position: absolute;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.marker-icon {
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.9vw;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.radar-marker .marker-icon {
  background: #ff6b6b;
}

.comm-marker .marker-icon {
  background: #4ecdc4;
}

.jammer-marker .marker-icon {
  background: #ffaa00;
}

.sensor-marker .marker-icon {
  background: #45b7d1;
}

.marker.active .marker-icon {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.8);
}

.marker-coverage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
  animation: coverage-pulse 4s ease-in-out infinite;
}

.radar-coverage {
  width: 12vh;
  height: 12vh;
  background: radial-gradient(circle, #ff6b6b, transparent);
}

.comm-coverage {
  width: 8vh;
  height: 8vh;
  background: radial-gradient(circle, #4ecdc4, transparent);
}

.jammer-coverage {
  width: 15vh;
  height: 15vh;
  background: radial-gradient(circle, #ffaa00, transparent);
}

.sensor-coverage {
  width: 6vh;
  height: 6vh;
  background: radial-gradient(circle, #45b7d1, transparent);
}

.data-connections {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.connection-svg {
  width: 100%;
  height: 100%;
}

.connection-line {
  stroke-dasharray: 5 5;
}

.map-scale {
  position: absolute;
  bottom: 1vh;
  left: 1vw;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5vh 1vw;
  border-radius: 0.3vh;
  color: #ffffff;
  font-size: 0.7vw;
}

.scale-bar {
  display: flex;
  height: 0.3vh;
  width: 6vw;
  margin-bottom: 0.3vh;
}

.scale-segment {
  flex: 1;
  border: 1px solid #ffffff;
  border-right: none;
}

.scale-segment:last-child {
  border-right: 1px solid #ffffff;
}

.scale-segment:nth-child(even) {
  background: #ffffff;
}

.coordinate-display {
  position: absolute;
  top: 1vh;
  left: 1vw;
  background: rgba(0, 0, 0, 0.7);
  padding: 0.5vh 1vw;
  border-radius: 0.3vh;
  color: #00f5ff;
  font-size: 0.8vw;
  font-family: monospace;
}

.equipment-panel {
  width: 28%;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 1vw;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-title {
  color: #ffffff;
  font-size: 1.1vw;
  font-weight: bold;
}

.equipment-details,
.equipment-list,
.layer-controls {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  padding: 1vh 1vw;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-title {
  color: #00f5ff;
  font-size: 1.1vw;
  font-weight: bold;
  margin-bottom: 1vh;
  text-align: center;
}

.detail-items {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  margin-bottom: 1vh;
}

.detail-item {
  display: flex;
  justify-content: space-between;
}

.detail-label {
  color: #cccccc;
  font-size: 0.8vw;
}

.detail-value {
  color: #ffffff;
  font-size: 0.8vw;
  font-weight: bold;
}

.detail-value.active { color: #00ff00; }
.detail-value.warning { color: #ffaa00; }
.detail-value.error { color: #ff4444; }

.parameter-section {
  border-top: 1px solid rgba(0, 245, 255, 0.3);
  padding-top: 1vh;
}

.param-title {
  color: #ffffff;
  font-size: 1vw;
  margin-bottom: 1vh;
  text-align: center;
}

.param-chart {
  height: 12vh;
  width: 100%;
}

.list-header,
.control-title {
  color: #ffffff;
  font-size: 1vw;
  font-weight: bold;
  margin-bottom: 1vh;
  text-align: center;
}

.list-items {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  max-height: 20vh;
  overflow-y: auto;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  padding: 0.8vh 1vw;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.3vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.list-item:hover,
.list-item.active {
  border-color: rgba(0, 245, 255, 0.5);
  background: rgba(0, 245, 255, 0.1);
}

.item-icon {
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 50%;
}

.item-icon.radar { background: #ff6b6b; }
.item-icon.communication { background: #4ecdc4; }
.item-icon.jammer { background: #ffaa00; }
.item-icon.sensor { background: #45b7d1; }

.item-info {
  flex: 1;
}

.item-name {
  color: #ffffff;
  font-size: 0.8vw;
  font-weight: bold;
}

.item-status {
  font-size: 0.7vw;
}

.item-status.active { color: #00ff00; }
.item-status.warning { color: #ffaa00; }
.item-status.error { color: #ff4444; }

.item-signal .signal-indicator {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
}

.signal-indicator.strong { background: #00ff00; }
.signal-indicator.medium { background: #ffaa00; }
.signal-indicator.weak { background: #ff4444; }

.control-items {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.control-item {
  color: #ffffff;
  font-size: 0.8vw;
}

/* 动画 */
@keyframes heat-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

@keyframes coverage-pulse {
  0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.1); }
}

:deep(.el-select) {
  width: 8vw;
}

:deep(.el-input__inner) {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 245, 255, 0.3);
  color: #ffffff;
  font-size: 0.8vw;
}

:deep(.el-checkbox__label) {
  color: #ffffff;
  font-size: 0.8vw;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #00f5ff;
  border-color: #00f5ff;
}
</style>